import React, { useState } from 'react';
import { Button, Form, Input, notification } from 'antd';
import './index.scss'
import service from '../../api';
import { useNavigate } from 'react-router-dom'
import { useDispatch } from 'react-redux';
const Login = () => {
    var dispatch = useDispatch()
    var [value, setvalue] = useState()
    var history = useNavigate()
    const onFinish = async (values: any) => {
        var res = await service.cxl.userLogin(values)
        if (res.data.code == 200) {
            notification.success({ message: '登录成功' })
            dispatch({ type: 'SAVE_LOGININFO', payload: res.data.data })
            history('/index/home')
        } else {
            notification.error({ message: '登录失败' })
        }
    }
    const saveValue = (e: any) => {
        setvalue(e.target.value)
    }
    const sendMail = async () => {
        var res = await service.cxl.userSendMail({ email: value })
    }
    return (
        <div className='login'>
            <div className='box'>
                <p>登录控制台</p>
                <Form
                    className='loginBox'
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="userName"
                        rules={[{ required: true, message: '请输入正确的用户名' }]}
                    >
                        <Input placeholder='账户：请输入账户名或手机号码' />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: '请输入正确的密码' }]}
                    >
                        <Input.Password placeholder='密码：请输入密码' />
                    </Form.Item>
                    <Form.Item
                        name="userEmail"
                        className='email'
                        rules={[{ required: true, message: '请输入正确的邮箱' }]}
                    >
                        <Input placeholder='邮箱：请输入邮箱' onChange={saveValue} name={value} />

                    </Form.Item>
                    <Button type="primary" onClick={sendMail}>发送验证码</Button>
                    <Form.Item
                        name="code"
                        rules={[{ required: true, message: '请输入正确的验证码' }]}
                    >
                        <Input placeholder='验证码：请输入验证码' />
                    </Form.Item>
                    <Form.Item >
                        <Button type="primary" htmlType="submit" block>
                            立即登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
};

export default Login;